@import (reference) 'config';
@import (reference) 'icons';
@import (reference) "../../../../app/less/app-icons";
@import (reference) '../../../../app/less/typography';

// top menu
@keyframes menu-toggler-animation-top {
  0% {
    transform: translate(-7px, -50%);
  }
  50% {
    transform: translate(-50%, -50%);
  }
  100% {
    transform: translate(-50%, -50%) rotate(45deg);
  }
}

@keyframes menu-toggler-animation-bottom {
  0% {
    transform: translate(5px, -50%);
  }
  50% {
    transform: translate(-50%, -50%);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
}

.logo {
  cursor: pointer;
}

@media screen and (max-width: 860px) {
body {
  .mobile-menu-wrapper {
    right: -261px;
  }

  .mobile-menu-fader {
    display: none;
  }

  &.menu-is-shown {
    .mobile-menu-fader {
      position: fixed;
      display: block;
      top: 0;
      left: 0;
      opacity: @fader-opacity;
      width: 100%;
      height: 100%;
      background-color: @fader-background;
    }

    .mobile-menu-wrapper {
      right: -261px;
    }
  }
}

  .link-border {
    content: '';
    width: 100%;
    height: 1px;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: @mobile-menu-border;
    opacity: .3;
  }

  // toggler button
  .mobile-menu-toggler {
    display: block;
    position: absolute;
    right: 25px;
    height: 60px;
    width: 60px;
    cursor: pointer;
    transition: .25s;
    z-index: 22;

    span,
    &::before,
    &::after {
      background: black;
      position: absolute;
      width: 22px;
      top: 50%;
      left: 50%;
      transform-origin: center;
      transform: translateX(-50%);
      transition: .5s;
      content: '';
      display: block;
      height: 2px;
      background: @color-basic-900;
    }

    &:hover {
      span,
      &::before,
      &::after {
        background: @color-submit-400;
      }
    }

    span {
      transform: translate(-50%, -7px);
    }

    &::before {
      transform: translate(-50%, -50%);
    }

    &::after {
      transform: translate(-50%, 5px);
    }
  }

  // end toggler button
  // basic mobile menu styles
  .mobile-menu {
    display: block;
    position: fixed;
    right: 0;
    z-index: 12;

    ul {
      display: flex;
      list-style-type: none;
      padding: 0;
      margin: 0;
      height: 100%;
      flex-direction: column;

      li.separator {
        height: 100%;
      }
      li {
        display: block;
      }
    }

    .has-user-address {
      .flex {
        align-items: center;
      }
      .mobile-user-info div {
        max-width: 160px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;

        &.mobile-user-info-name {
          color: @white-only;
        }
      }
    }

    .copy-icon {
      display: none;
    }

    .avatar-container {
      margin: 14px 14px 14px 0;
    }

    .mobile-menu-fader {
      position: fixed;
      right: 0;
      top: 0;
      width: 100%;
      height: 120vh;
      background: @color-basic-900;
      opacity: 0.3;
      display: none;
      transition: .3s;
    }

    .mobile-menu-wrapper,
    .mobile-menu-wrapper-inner {
      position: fixed;
      transition: .25s;
      height: 100%;
      background: @mobile-menu-background;
      width: 261px;
      top: 0;
      min-height: 250px;
      z-index: 1;
      max-height: 100%;
    }

    .mobile-menu-wrapper-inner {
      z-index: 2;
    }

    .sign-in-link,
    .get-started-link {
      z-index: 10;
      &::before {
        bottom: auto;
        top: 0;
      }
    }

    a {
      color: @mobile-menu-link;
      transition: .3s;
      line-height: 50px;
      display: flex;
      width: 100%;
      padding: 0 20px;
      font-size: 17px;
      position: relative;

      &.menu-link-menu {
        background: @mobile-menu-background-hover;
        color: @white-only;
      }

      &::before {
        .link-border;
      }

      &.has-child {
        position: relative;

        &::after {
          transition: .3s;
          position: absolute;
          display: block;
          content: '';
          background: @dex-arrow-right-icon;
          right: 20px;
          top: 50%;
          transform: translate(0, -50%);
          width: 14px;
          height: 14px;
        }
      }

      &.menu-link {
        background-position: 20px center;
        background-repeat: no-repeat;

        &-menu,
        &-aliases,
        &-settings,
        &-dashboard,
        &-transactions,
        &-portfolio,
        &-leasing,
        &-logout,
        &-apple,
        &-android {
          padding-left: 58px;
        }

        &.get-started-link {
          background-position: calc(100% ~' - 20px') center;
          background-repeat: no-repeat;
          background-image: @arrow-white-right;
        }

        &-menu {
          background-image: @menu-back-icon;
          &::before {
            opacity: .6;
          }
        }

        &-aliases {
          background-image: @aliases-icon;
        }

        &-settings {
          background-image: @settings-icon;
        }

        &-leasing {
          background-image: @leasing-icon;
        }

        &-portfolio {
          background-image: @portfolio-desktop-icon;
        }

        &-dashboard {
          background-image: @wallet-desktop-icon;
        }

        &-transactions {
          background-image: @transactions-desktop-icon;
        }

        &-apple {
          background-image: @apple-store-icon;
        }

        &-android {
          background-image: @google-play-icon;
        }

        &-logout {
          background-image: @logout-icon;
          border-bottom: 0 none;
          &::before {
            .link-border;
            bottom: auto;
            top: 0;
          }
        }
      }
    }

    .menu-link-main {
      display: none;
    }
  }

  body.dex-demo {
    .mobile-menu {
      .menu-link-exchange {
        display: none;
      }
      .menu-link-main {
        display: block;
      }
    }
  }
  // end basic mobile menu styles

  // expanded
  .mobile-menu-wrapper {
    &.mobile-menu-wrapper-inner {
      right: -261px;
      height: 100%;
      &::after {
        content: '';
        display: block;
        height: 100%;
        width: 1px;
        position: absolute;
        top: 0;
        left: 0;
        background: @mobile-menu-inner-border;
        opacity: .3;
      }
    }
  }

  header.expanded {
    &.show-wallet {
      .mobile-menu-wrapper-inner {
        &.wallet-menu {
          right: 0;
        }
        &.aliases-menu {
          right: -261px;
        }
      }
    }

    &.show-aliases {
      .mobile-menu-wrapper-inner {
        &.wallet-menu {
          right: -261px;
        }
        &.aliases-menu {
          right: 0;
        }
      }
    }

    &.show-downloads {
      .mobile-menu-wrapper-inner {
        right: 0;
      }
    }

    .mobile-menu-wrapper:not(.mobile-menu-wrapper-inner) {
      right: 0;
    }

    .mobile-menu {
      .mobile-menu-fader {
        display: block;
      }
    }
    // end menu logic

    .mobile-menu-toggler {
      right: 261px;

      &:hover {
        span,
        &::before,
        &::after {
          background: @color-basic-900;
        }
      }

      span {
        animation-fill-mode: forwards;
        animation-duration: .5s;
        animation-name: menu-toggler-animation-top;
      }

      &::before {
        opacity: 0;
      }

      &::after {
        animation-fill-mode: forwards;
        animation-duration: .5s;
        animation-name: menu-toggler-animation-bottom;
      }
    }
  }

  // end expanded
  body {
    w-site-header {
      header {
        padding: 0 20px 0 38px;
        .dropdown-toggler {
          display: none;
        }
      }
    }
  }
}

@media screen and (min-width: 861px) {
  nav.mobile-menu {
    display: none;
  }
}

@media screen and (max-width: 480px) {
  .mobile-menu-toggler {
    right: 5px;
  }

  body {
    w-site-header {
      header {
        padding: 0 20px;
      }
    }
  }
}

//header

@header-shadow: 0 0 10px 0 lightgrey;

@keyframes header-down-shadow {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes header-up-shadow {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
